<template>
  <div class="container">
    <van-nav-bar title="选择场次票面" left-arrow @click-left="onClickLeft" />

    <div class="content">
      <div class="show-info">
        <div class="left">
          <div class="title">当前已选节目</div>
          <div class="name">{{ showName }}</div>
        </div>
        <div class="right">
          <div class="cover">
            <img :src="posterURL" class="thumb" />
          </div>
        </div>
      </div>

      <van-collapse accordion v-model="activeNames">
        <van-collapse-item name="1" ref="session-collapse">
          <template #title>
            <div class="session-title">请选择场次</div>
          </template>
          <template #value>
            <div class="session-value">{{ activeSessionName }}</div>
          </template>
          <template #right-icon>
            <van-icon name="arrow" class="arrow" v-show="activeSessionIndex != null" />
          </template>
          <template #default>
            <ul class="sessions">
              <li
                class="session-item"
                :class="{ active: activeSessionIndex === index }"
                v-for="(session, index) in sessions"
                :key="session.showSessionOID"
                @click="changeSession(session, index)"
              >
                {{ session.sessionName }}
              </li>
            </ul>
          </template>
        </van-collapse-item>

        <van-collapse-item name="2" ref="price-collapse" v-show="activeSessionIndex != null">
          <template #title>
            <div class="price-title">请选择票面</div>
          </template>
          <template #value>
            <div class="price-value">{{ activePriceName }}</div>
          </template>
          <template #right-icon>
            <van-icon name="arrow" class="arrow" v-show="activePriceIndex != null" />
          </template>
          <template #default>
            <ul class="price">
              <li
                class="price-item"
                :class="{ active: activePriceIndex === index }"
                v-for="(price, index) in prices"
                :key="price.seatPlanOID"
                @click="changePrice(price, index)"
              >
                {{ price.originalPrice }} 票面-{{ price.comments }}
              </li>
            </ul>
          </template>
        </van-collapse-item>

        <van-collapse-item name="3" ref="ticket-collapse" v-show="activePriceIndex != null">
          <template #title>
            <div class="ticket-title">请选择出票方式</div>
          </template>
          <template #value>
            <div class="ticket-value">{{ activeTicketName }}</div>
          </template>
          <template #right-icon>
            <van-icon name="arrow" class="arrow" v-show="activeTicketIndex != null" />
          </template>
          <template #default>
            <ul class="ticket">
              <li
                class="ticket-item"
                :class="{ active: activeTicketIndex === index }"
                v-for="(ticket, index) in tickets"
                :key="index"
                @click="changeTicket(ticket, index)"
              >
                {{ ticket.text }}
              </li>
            </ul>
          </template>
        </van-collapse-item>
      </van-collapse>
    </div>

    <div
      class="confirm"
      v-show="activeSessionIndex != null && activePriceIndex != null && activeTicketIndex != null"
    >
      <van-button type="primary" round block @click="next" color="#FF1D41">下一步</van-button>
    </div>
  </div>
</template>

<script setup>
import { fetchTourSiteTicketTransferSession, fetchTourSiteTicketTransferSeat } from '@/api/index.js'

import { ref, computed, onMounted, useTemplateRef } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const showId = computed(() => route.query.showId)

import { useStore } from '@/stores/index.js'
const store = useStore()

const showName = computed(() => store.transferTicket.showName)
const posterURL = computed(() => store.transferTicket.posterURL)

const sessionCollapse = useTemplateRef('session-collapse')
const priceCollapse = useTemplateRef('price-collapse')
const ticketCollapse = useTemplateRef('ticket-collapse')

const activeNames = ref('1')

const activeSessionIndex = ref(null)
const activeSessionName = ref('')

const activePriceIndex = ref(null)
const activePriceName = ref('')

const activeTicketIndex = ref(null)
const activeTicketName = ref('')

const sessions = ref([])
const prices = ref([])

const tickets = ref([
  { text: '纸质票', value: 'PAPER' },
  { text: '电子票', value: 'E-TICKET' },
])

const showSessionID = ref('')

onMounted(async () => {
  // 转票-选场次和出票方式
  await getTourSiteTicketTransferSession(showId.value)

  //  await getTourSiteTicketTransferSeat()
})

const onClickLeft = () => {
  router.back()
}

//选择场次
const changeSession = (session, index) => {
  activeSessionIndex.value = index
  activeSessionName.value = session.sessionName
  getTourSiteTicketTransferSeat(session.showSessionOID)
  sessionCollapse.value.toggle(false)
  priceCollapse.value.toggle(true)
}

//选择票面
const changePrice = (price, index) => {
  activePriceIndex.value = index
  activePriceName.value = price.originalPrice + ' ' + '票面'
  priceCollapse.value.toggle(false)
  ticketCollapse.value.toggle(true)
}

//选择出票方式
const changeTicket = (ticket, index) => {
  activeTicketIndex.value = index
  activeTicketName.value = ticket.text
  // ticketCollapse.value.toggle(false)
}

const getTourSiteTicketTransferSession = async (showId) => {
  try {
    const {
      statusCode,
      result: { data },
    } = await fetchTourSiteTicketTransferSession(showId)
    if (statusCode === 200) {
      // console.log('getTourSiteTicketTransferSession', data)
      sessions.value = data
    }
  } catch (error) {
    console.log('转票-选场次和出票方式，获取失败：', error)
  }
}

const getTourSiteTicketTransferSeat = async (showSessionOID) => {
  try {
    const {
      statusCode,
      result: { data },
    } = await fetchTourSiteTicketTransferSeat(showSessionOID)
    if (statusCode === 200) {
      prices.value = data
    }
  } catch (error) {
    console.log('转票-选场次和出票方式，获取失败：', error)
  }
}
</script>

<style scoped lang="scss">
.container {
  position: relative;

  .content {
    // padding: 0 15px;
    position: relative;

    .show-info {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 20px 15px;
      border-bottom: 1px solid #eaeaea;

      .left {
        flex: 1;
        min-width: 0;

        .title {
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 5px;
        }

        .name {
          font-size: 12px;
          font-weight: 400;
          color: #95949d;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .right {
        .cover {
          width: 30px;
          height: 45px;
          overflow: hidden;
          object-fit: cover;

          .thumb {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
    }

    .session-title,
    .price-title,
    .ticket-title {
      font-size: 16px;
      font-weight: bold;
    }

    .session-value,
    .price-value,
    .ticket-value {
      font-weight: 400;
      color: #95949d;
      font-size: 12px;
    }

    .arrow {
      display: flex;
      align-items: center;
      color: #95949d;
      margin-left: 10px;
    }

    :deep(.van-cell__value) {
      flex: 0 0 auto;
    }

    :deep(.van-collapse-item__content) {
      padding-top: 0;

      .sessions {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;

        .session-item {
          font-size: 14px;
          font-weight: 400;
          color: #323038;
          background: #f6f6f6;
          border-radius: 4px;
          padding: 15px 12px;
          cursor: pointer;

          &.active {
            background: #ffeeee;
            color: #ff3339;
          }
        }
      }

      .price {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;

        .price-item {
          font-size: 12px;
          font-weight: 400;
          color: #323038;
          background: #f6f6f6;
          border-radius: 4px;
          padding: 15px 12px;
          cursor: pointer;

          &.active {
            background: #ffeeee;
            color: #ff3339;
          }
        }
      }

      .ticket {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;

        .ticket-item {
          font-size: 14px;
          font-weight: 400;
          color: #323038;
          background: #f6f6f6;
          border-radius: 4px;
          padding: 15px 12px;
          cursor: pointer;

          &.active {
            background: #ffeeee;
            color: #ff3339;
          }
        }
      }
    }
  }

  .confirm {
    margin-top: 30px;
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
  }
}
</style>
